<template>
    <div class="recycleContainer">
        <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span>博客回收站</span>
            <el-button style="float: right; margin-top:-8px;" type="danger" @click="toggleSelection()">批量删除</el-button>
            <el-button style="float: right; margin-top:-8px;" type="success" @click="resumeSelection()">批量恢复</el-button>
        </div>
        <div class="recycleForm">
            <el-table
                ref="multipleTable"
                :data="blogedData"
                tooltip-effect="dark"
                style="width: 100%"
                :default-sort = "{prop: 'change_time', order: 'descending'}"
                @selection-change="handleSelectionChange">
                <el-table-column
                type="selection"
                width="55">
                </el-table-column>
                <el-table-column
                prop="change_time"
                sortable
                label="被删日期"
                width="220">
                </el-table-column>
                <el-table-column
                prop="id"
                label="ID"
                width="120">
                </el-table-column>
                <el-table-column
                prop="title"
                label="标题"
                width="120">
                </el-table-column>
                <el-table-column
                label="封面"
                width="220">
                <template slot-scope="scope">
                <img class="blogFace" :src="scope.row.blogface" alt />
                </template>
                </el-table-column>
                <el-table-column
                prop="content"
                label="内容"
                width="220"
                show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                prop="author"
                label="作者"
                width="220">
                </el-table-column>
                <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                    size="mini"
                    type="success"
                    @click="handleEdit(scope.$index, scope.row)">恢复</el-button>
                    <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">永久删除</el-button>
                </template>
                </el-table-column>
            </el-table>
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage1"
            :page-sizes="pageSizeArr"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
            </el-pagination>
        </div>
        </el-card>
    </div>
</template>

<script>
import {getBlogedApi ,resumeBlogApi ,delBlogedApi} from '@/api/blog'
  export default {
    data() {
      return {
        // 表单
        blogedData: [
        
         ],
        multipleSelection: [],
        // 分页
        pageSizeArr:[5,10,20,40,80],
        total:0,
        currentPage1:1
      }
    },

    methods: {
    // 获取被删博客方法
    async getBloged(data){
        if(data){
            await getBlogedApi(data).then(res=>{
                this.blogedData = res.data.blogeds
                this.total = res.data.total
            })
        }else{
            const data = {pageSize:'',pageNum:''}
            await getBlogedApi(data).then(res=>{
                this.blogedData = res.data.blogeds
                this.total = res.data.total
            })
        }
    },
    // 恢复博客方法封装
    async resumeBlog(data){
        await resumeBlogApi(data)
    },
    // 表单
    // 批量删除
    async toggleSelection(rows) {
      this.$confirm(`此操作将恢复博客, 是否继续?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          if(this.multipleSelection.length == 0){
            this.$message({type:'error',message:'未选择'})
          }else{
            await delBlogedApi(this.multipleSelection).then(async res=>{
                const data = {pageSize:this.pageSize,pageNum:this.currentPage1}
                await this.getBloged(data)
            })
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消恢复'
          });          
        });
       
      },
      // 批量恢复、
     async resumeSelection(){
      this.$confirm(`此操作将恢复博客, 是否继续?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          if(this.multipleSelection.length == 0){
            this.$message({type:'error',message:'未选择'})
          }else{
            await this.resumeBlog(this.multipleSelection).then(async res=>{
            const data = {pageSize:this.pageSize,pageNum:this.currentPage1}
            await this.getBloged(data)
            })
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消恢复'
          });          
        });
     },
     handleSelectionChange(val) {
        this.multipleSelection = val;
      },
    //   恢复博客按钮
     async handleEdit(index, row) {
        this.$confirm(`此操作将恢复${row.title}, 是否继续?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
            const data = {isdel:row.isdel,blogId:row.id}
            await this.resumeBlog(data).then(async res=>{
            const data = {pageSize:this.pageSize,pageNum:this.currentPage1}
            await this.getBloged(data)
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消恢复'
          });          
        });
       
      },
    //   永久删除
      handleDelete(index, row) {
        this.$confirm(`此操作将恢复${row.title}, 是否继续?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
            const data = {blogId:row.id}
            await delBlogedApi(data).then(async res=>{
                const data = {pageSize:this.pageSize,pageNum:this.currentPage1}
                await this.getBloged(data)
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
    // 分页
    async handleSizeChange(val) {
        this.pageSize = val
        const data = {pageSize:this.pageSize,pageNum:this.currentPage1}
        await this.getBloged(data)
      },
    async handleCurrentChange(val) {
        this.currentPage1 = val
        const data = {pageSize:this.pageSize,pageNum:this.currentPage1}
        await this.getBloged(data)
      }
    },
    async mounted(){
       await this.getBloged()
    }
  }
</script>
<style lang="less" scoped>
.recycleContainer{
    height: 80vh;
    .recycleForm{
        height: 70vh;
        overflow: auto;
    }
    .blogFace{
        width: 80px;
  height: 40px;
    }
}
</style>